import { defineConfig, presetUno, presetAttributify, presetIcons, transformerDirectives, transformerVariantGroup } from 'unocss'

export default defineConfig({
  // 预设
  presets: [
    presetUno(), // 默认预设
    presetAttributify(), // 属性化模式支持
    presetIcons({
      scale: 1.2,
      extraProperties: {
        'display': 'inline-block',
        'vertical-align': 'middle'
      }
    }), // 图标支持
  ],
  // 转换器
  transformers: [
    transformerDirectives(), // 支持@apply、@screen等指令
    transformerVariantGroup(), // 支持(hover:text-red/50 focus:text-blue/40)这样的写法
  ],
  // 自定义规则
  rules: [
    // 自定义规则示例
    ['card-shadow', { 'box-shadow': '0 4px 8px rgba(0, 0, 0, 0.08)' }],
    ['text-brand', { color: '#22c6ff' }],
  ],
  // 自定义快捷方式
  shortcuts: {
    // 常用组件样式
    'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md transition-colors duration-200',
    'btn-primary': 'btn bg-blue-500 text-white hover:bg-blue-700',
    'btn-secondary': 'btn bg-gray-200 text-gray-800 hover:bg-gray-300',
    
    // 布局相关
    'flex-center': 'flex items-center justify-center',
    'grid-center': 'grid place-items-center',
    
    // 卡片样式
    'card': 'bg-white rounded-lg p-4 card-shadow',
    'card-hover': 'card hover:shadow-lg transition-shadow duration-200',
    
    // 输入框样式
    'input-base': 'border rounded px-3 py-2 outline-none focus:ring-2 focus:ring-blue-300',
    
    // 响应式容器
    'container-fluid': 'w-full px-4',
    'container-sm': 'max-w-screen-sm mx-auto px-4',
    'container-md': 'max-w-screen-md mx-auto px-4',
    'container-lg': 'max-w-screen-lg mx-auto px-4',
    
    // 响应式布局
    'responsive-grid': 'grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4',
    'responsive-flex': 'flex flex-wrap',
    
    // 响应式间距
    'responsive-p': 'p-2 sm:p-3 md:p-4',
    'responsive-m': 'm-2 sm:m-3 md:m-4',
    
    // 响应式文本
    'responsive-text': 'text-sm sm:text-base md:text-lg',
    'responsive-title': 'text-xl sm:text-2xl md:text-3xl font-bold',
    
    // 移动优先隐藏/显示
    'hide-sm': 'hidden sm:block',
    'show-sm': 'block sm:hidden',
    
    // 栅格系统
    'row': 'flex flex-wrap -mx-2',
    'col': 'px-2',
    'col-full': 'w-full px-2',
    'col-1/2': 'w-full sm:w-1/2 px-2',
    'col-1/3': 'w-full sm:w-1/2 md:w-1/3 px-2',
    'col-1/4': 'w-full sm:w-1/2 md:w-1/3 lg:w-1/4 px-2',
  },
  // 主题配置
  theme: {
    colors: {
      brand: {
        primary: '#22c6ff',
        secondary: '#0099cc',
        light: '#e6f7ff',
      },
    },
    breakpoints: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },
  },
  // 安全列表，始终包含这些类
  safelist: [
    'hidden', 'block', 'flex', 'grid',
    'text-brand-primary', 'bg-brand-light',
    'w-full', 'h-full', 'container-fluid', 'container-sm', 'container-md', 'container-lg',
    'responsive-grid', 'responsive-flex', 'responsive-p', 'responsive-m',
    'responsive-text', 'responsive-title', 'hide-sm', 'show-sm',
    'row', 'col', 'col-full', 'col-1/2', 'col-1/3', 'col-1/4',
  ],
}) 